<!-- 商品管理 -->
<template>
  <div class="curriculum-resources-container">
    <header>
      <el-form ref="searchForm" :model="searchForm" inline label-width="120px" label-position="right">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="办公室规模" prop="cate_id">
              <el-select v-model="searchForm.size" placeholder="请选择">
                <el-option
                  v-for="item in sizeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="办公室编号" prop="keyword">
              <el-input v-model="searchForm.keyword" type="number" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item>
              <el-button @click="SearchReset('searchForm')">重置</el-button>
              <el-button type="primary" :loading="searchLoading" @click="SearchSubmit">查询</el-button>
              <el-button type="primary" @click="pageInfo.show = true">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </header>
    <article class="flex">
      <Table
        :table-data="pageInfo.list"
        :table-column-options="pageInfo.columns"
        :table-data-total="100"
        :page="1"
        :size="10"
        @tableUpdate="CurrentChange"
      >
        <template #operation="{ data }">
          <el-button type="text" @click="TableEdit(data)">编辑</el-button>
          <el-button type="text" @click="TableDel(data)">删除</el-button>
          <!-- <el-button type="text" @click="viewDetail(data)">详情</el-button> -->
        </template>
      </Table>
    </article>

    <el-dialog
      title="精装办公空间"
      :visible.sync="pageInfo.show"
      width="50%"
      :before-close="() => pageInfo.show = false"
    >

      <el-form :model="pageInfo.formData" inline label-width="120px" label-position="right">
        <el-form-item label="办公室名称">
          <el-input v-model="pageInfo.formData.name" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="容纳人数">
          <el-input v-model="pageInfo.formData.size" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="是否正常营业">
          <el-select v-model="searchForm.area">
            <el-option v-for="(item, index) in yyData" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="已长租">
          <el-radio value="1">是</el-radio>
          <el-radio value="2">否</el-radio>
        </el-form-item>
        <el-form-item label="办公室配置">
          <el-checkbox v-for="item in configArr" :key="item" v-model="checked1" :label="item" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="pageInfo.formData.tel" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="位置坐标">
          <el-row :gutter="24">
            <el-col :span="6"><el-input v-model="pageInfo.formData.tel" clearable placeholder="经度" /></el-col>
            <el-col :span="6"><el-input v-model="pageInfo.formData.tel" clearable placeholder="纬度" /></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="开放时间">
          <el-date-picker v-model="pageInfo.formData.value1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
        </el-form-item>
        <el-form-item label="每日营业时间">
          <el-date-picker v-model="pageInfo.formData.value2" type="datetimerange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
        </el-form-item>
        <el-form-item label="所属门店">
          <el-select v-model="pageInfo.formData.area">
            <el-option v-for="(item, index) in areaData" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="每小时单价">
          <el-input v-model="pageInfo.formData.tel" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="pageInfo.formData.address" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="缩略图">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="图集展示">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="pageInfo.formData.remark" type="textarea" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label=" " style="text-align: right;">
          <el-button @click="Cancel">取消</el-button>
          <el-button type="primary" @click="Submit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/Table/index'
export default {
  name: 'CurriculumResources',
  components: {
    Table
  },
  data() {
    return {
      searchLoading: false,
      DICTDialog: false,
      classShow: false,
      classList: [],
      searchForm: {
        keyword: '',
        page: 1
      },
      configArr: ['水电', '物管', '空调', '办公家私', '饮水机', '自助文印', '无线wifi', '智能门禁', '冰箱', '微波炉'],
      // configArr: ['水电', '物管', '空调', '办公家私', '饮水机', '自助文印', '无线wifi', '智能门禁', '冰箱', '微波炉'],
      areaData: [
        { id: 1, name: '组织一' },
        { id: 2, name: '组织二' },
        { id: 3, name: '组织三' }
      ],
      yyData: [
        { id: 1, name: '正常营业' },
        { id: 2, name: '闭店' }
      ],
      sizeOptions: [
        {
          id: 1,
          name: '1-5人'
        },
        {
          id: 2,
          name: '6-10人'
        },
        {
          id: 3,
          name: '11-20人'
        },
        {
          id: 4,
          name: '21-40人'
        }
      ],
      pageInfo: {
        show: false,
        formData: {
          name: '',
          size: '10',
          remark: '',
          tel: '',
          address: ''
        },
        columns: [
          {
            label: '编号',
            prop: 'no',
            width: 100
          },
          {
            label: '会议室名称',
            prop: 'name',
            width: 200
          },
          {
            label: '价格',
            prop: 'price'
          },
          {
            label: '详细地址',
            prop: 'address'
          },
          {
            label: '所属门店',
            prop: 'address'
          },
          {
            label: '营业时间',
            prop: 'jobTime'
          },
          {
            label: '操作',
            columnType: true,
            slotName: 'operation',
            width: 200
          }
        ],
        list: [
          {
            name: 'dddd',
            price: '123',
            no: '12',
            jobTime: '11:00-12:00',
            address: '北京市朝阳区亮马桥店'
          }, {
            name: 'fdsafdsfds',
            price: '123',
            no: '1'
          }
        ],
        data: {}
      }
    }
  },
  async mounted() {
    this.TableList()
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    TableEdit() {
      this.pageInfo.show = true
      console.log(111)
    },
    // 删除
    TableDel() {
      this.$message({
        type: 'success',
        message: '删除成功'
      })
    },
    // // 详情
    // viewDetail() {
    //   this.pageInfo.show = true
    // },
    handleCascader(e) {
      this.searchForm.cate_id = e[e.length - 1]
      // this.TableList()
    },
    goDetail(row) {
      this.$router.push({
        path: '/goods/goodsDetail',
        query: {
          goods_id: row.goods_id
        }
      })
    },
    closeModal() {
      this.modalConfig.show = false
      this.$refs['formData'].resetFields()
    },
    TableList() {
      // queryList(this.searchForm).then(res => {
      //   // console.log(res, 222)
      //   this.tableData = {
      //     list: [
      //       {
      //         name: 'dddd',
      //         price: '123',
      //       }
      //     ]
      //   }
      // })
    },
    Submit() {
      console.log('提交')
    },
    // 点击查询按钮
    SearchSubmit() {
      this.searchLoading = true
      setTimeout(() => {
        this.searchLoading = false
      }, 1000)
      this.TableList()
    },
    // 点击重置按钮
    SearchReset(name) {
      this.$refs[name].resetFields()
      this.TableList()
    },
    // 点击新增按钮
    CreateForm() {
      this.modalConfig.show = true
      this.modalConfig.title = '新增'
    },
    // 分页数据回调
    CurrentChange(e) {
      // console.log(e, 111)
      // this.searchForm.pageSize = e.size
      this.searchForm.page = e
      this.TableList()
    },
    // 点击表单取消
    Cancel() {
      this.pageInfo.show = false
    }
  }
}
</script>

<style scope>
.el-form-item{
  display: flex !important;
}
.el-form-item__content{
  width: 100%;
}
.el-select{
  width: 100%;
}
.el-row{
  display:flex;flex-wrap: wrap;
}
.el-card__body{
  padding:0;
}
.pagination{
  text-align: right;
  margin-top: 40px;
  margin-left: auto;
}
</style>
<style lang="scss" scoped>
.curriculum-resources-container{
  padding: 20px;
  ::v-deep.curriculum-wrap .el-form-item__content{
    display: flex;
    justify-content: flex-start;

    // justify-content: space-between;
    // & > div{
    //   flex: 1;
    // }
    .cover{
      width: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .video{
      width: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
